<template>
  <div class="params">
    <div class="params_const">
      <!-- 头部文案 -->
      <el-alert title="警告提示的文案" type="warning" effect="dark" :closable="false" show-icon>
      </el-alert>
      <!-- 选择器 -->
      <div class="block">
        <span class="demonstration">请选择商品分类: </span>
        <el-cascader v-model="value" :options="options" :props="info" @change="handleChange"></el-cascader>
      </div>
      <!-- tab切换 -->
      <el-tabs v-model="activeName" type="card" @tab-click="tabCheck(activeName)">
        <el-tab-pane label="参数名称" name="many">
          <el-button class="primary" type="primary" :disabled="flg" @click="addParameter">添加参数</el-button>

          <el-table :data="tableData_a" style="width: 100%" height="360px" border>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div>
                  <el-tag :key="index" v-for="(item, index) in scope.row.attr_vals" closable
                    :disable-transitions="false" @close="handleClose(index, scope.row.attr_vals)">
                    {{ item }}
                  </el-tag>
                  <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
                    ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)">
                  </el-input>
                  <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column label="参数名称" prop="attr_name">
            </el-table-column>

            <el-table-column label="描述" prop="desc">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="属性名称" name="only">
          <el-button class="primary" type="primary" :disabled="flg" @click="addParameter">添加参数</el-button>
          <el-table :data="tableData_b" style="width: 100%" border>
            <el-table-column type="expand"> </el-table-column>
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column label="属性名称" prop="attr_name">
            </el-table-column>
            <el-table-column label="描述" prop="desc">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 添加参数弹出框 -->

      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>
          <el-input v-model="nameVale"></el-input>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="Addparameters">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getcategories,
  getCategories_b,
  getattributes,
  AddCateApi,
  DelCate,
  AllDelCate,
} from "@/utils/http";
export default {
  data() {
    return {
      // tag输入框
      inputValue: "",
      inputVisible: false,
      options: [],
      value: "",
      activeName: "many",
      info: { expandTrigger: "hover", value: "cat_id", label: "cat_name" },
      // 表格数据
      tableData_a: [],
      tableData_b: [],
      attrid: 0,
      attridlength: [],
      attr: {
        attr_sel: this.activeName,
      },
      flg: true,
      dialogVisible: false,
      // 添加属性
      nameVale: "",
    };
  },
  created() {
    // 联级选择器数据
    getcategories().then((res) => {
      this.options = res.data;
    });
  },
  methods: {
    // 点击删除
    handleClick(val) {
      AllDelCate(this.attrid, val.attr_id).then((res) => {
        console.log(res);
        this.getparams_cate();
      });
    },
    // 封装请求数据
    getparams_cate() {
      let obj = {
        sel: this.activeName,
      };
      getCategories_b(this.attrid, obj).then((res) => {
        if (this.activeName == "many") {
          console.log(res.data);
          res.data.forEach((ele) => {
            // 添加状态
            ele.inputValue = "";
            ele.inputVisible = false;
            ele.attr_vals =
              ele.attr_vals.length > 0 ? ele.attr_vals.split(",") : [];
            // 过滤后的数据
            this.tableData_a = res.data;
          });
        } else if (this.activeName == "only") {
          // ele.inputVisible = false;
          // ele.inputValue = "";
          this.tableData_b = res.data;
        }
        console.log(res);
      });
    },
    // 点击按钮
    showInput(row) {
      console.log(row);
      row.inputVisible = true;
      this.$nextTick((_) => {
        // console.log(this.$refs.saveTagInput.$refs.input.focus);
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 回车事件
    handleInputConfirm(row) {
      console.log(row);
      let inputValue = row.inputValue;
      if (inputValue.trim().length > 0) {
        row.attr_vals.push(inputValue);
        // 添加
        // 添加的数据
        let obj = {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals:
            this.activeName == "many" ? row.attr_vals.join(",") : row.attr_vals,
        };
        AddCateApi(this.attrid, row.attr_id, obj).then((res) => {
          console.log(res);
          this.rederdata();
          this.getparams_cate();
        });
        this.rederdata();
      }
      // row.inputVisible = false;
      row.inputValue = "";
    },
    // 删除事件
    handleClose(index, item) {
      let obj = {
        attr_name: item[index],
        attr_sel: this.activeName,
      };
      DelCate(this.attrid, index, obj).then((res) => {
        console.log(res);
      });
    },
    // 封装参数数据
    rederdata() {
      if (this.attridlength.length != 3) {
        this.$message({
          message: "请选择三级分类",
          type: "warning",
        });
        this.flg = true;
        return false;
      }
      // 参数请求接口
      this.getparams_cate();
    },
    // 选择器
    handleChange(val) {
      this.attridlength = val;
      this.attrid = val[2];
      // 当选择器选着参数时 才可以添加
      if (val != "") {
        this.flg = false;
      }
      this.rederdata();
      this.getparams_cate();
    },
    // 切换tab数据
    tabCheck(val) {
      this.activeName = val;
    },
    // 点击添加参数
    addParameter() {
      this.dialogVisible = true;
    },
    Addparameters() {
      // 判断不能为空
      if (this.nameVale == "") {
        this.$message({
          message: "输入框不能为空",
          type: "warning",
        });
        return;
      }
      // 关闭弹窗
      this.dialogVisible = false;
      let obj = {
        id: this.attrid,
        attr_name: this.nameVale,
        attr_sel: this.activeName,
      };
      getattributes(obj).then((res) => {
        console.log(res);
        this.getparams_cate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.input-new-tag {
  width: 88px;
}

.el-tag {
  margin: 5px;
}

.primary {
  margin: 10px 0;
}

.params {
  padding: 10px;
  background: white;
  border-radius: 8px;

  .params_const {
    .block {
      margin: 10px 0;
    }
  }

  .el-table {
    margin: 15px;
  }
}
</style>